<template>
  <CardVue
    height="2rem"
    title="风险预警分类"
    style="margin-bottom: 0.3rem; margin-top: 0.2rem"
  >
    <div class="layout">
      <div class="layout-l">
        <div class="layout-l-img">
          <img src="@/assets/imgs/largeScreen/icon/a2.png" alt="" />
        </div>
        <div class="layout-l-c">
          <div>
            一级风险 <span>{{ info.v2.one }}</span>
          </div>
          <div>
            二级风险 <span>{{ info.v2.two }}</span>
          </div>
          <div>
            三级风险 <span>{{ info.v2.three }}</span>
          </div>
        </div>
      </div>
      <div class="layout-r">
        <div class="table">
          <div class="row th">
            <div class="col">风险预警分类</div>
            <div class="col">社会组织数量</div>
          </div>
          <div class="body riskWarningClassification">
            <div class="body-scroll">
              <div class="row" v-for="it in list">
                <div class="col">
                  {{ it.name || '' }}
                </div>
                <div class="col">
                  {{ it?.num || 0 }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </CardVue>
</template>
<script setup lang="ts">
import CardVue from '@/views/largeScreen/components/card/card.vue'
import * as echarts from 'echarts'
import { dpcont, riskTypeSort } from '@/api/spotCheck/spotCheck'
import { nextTick, onMounted, ref } from 'vue'

interface Info {
  v1: {
    alls: number
    logout: number
    back: number
    uses: number
    st: number
    mf: number
  }
  v2: {
    one: number
    two: number
    three: number
  }
  v3: {
    one: number
    two: number
    three: number
  }
  v4: {
    one: number
    two: number
    three: number
  }
  v5: {
    one: number
    two: number
    three: number
  }
  v6: {
    one: number
    two: number
    three: number
  }
  v7: {
    one: number
    two: number
    three: number
  }
}

const info = ref<Info>({
  v1: {
    alls: 0,
    logout: 0,
    back: 0,
    uses: 0,
    st: 0,
    mf: 0
  },
  v2: {
    one: 0,
    two: 0,
    three: 0
  },
  v3: {
    one: 0,
    two: 0,
    three: 0
  },
  v4: {
    one: 0,
    two: 0,
    three: 0
  },
  v5: {
    one: 0,
    two: 0,
    three: 0
  },
  v6: {
    one: 0,
    two: 0,
    three: 0
  },
  v7: {
    one: 0,
    two: 0,
    three: 0
  }
})

onMounted(() => {
  dpcont().then((res) => {
    info.value = res.data
    init(res.data)
  })
})

interface List {
  name: string
  num: number
}

const list = ref<List[]>([])
const init = () => {
  riskTypeSort().then((res) => {
    list.value = res.data

    nextTick(() => {
      runScrolling()
    })
  })
}

const scrollAnimeState = ref()

const runScrolling = () => {
  const ul = document.querySelector<HTMLDivElement>(
    '.riskWarningClassification .body-scroll'
  )

  const ls = document.querySelectorAll<HTMLDivElement>(
    '.riskWarningClassification .row'
  )?.length

  let i = 0

  ul!.style.transition = 'all 1s ease'

  scrollAnimeState.value = setInterval(() => {
    if (!ul) return

    i++
    console.log('ls', ls, i)
    if (i >= ls) {
      i = 1
      ul.style.marginTop = '0'
    }
    ul.style.marginTop = `${-'.24' * i + 'rem'}`
  }, 2400)
}
</script>

<style scoped lang="scss">
.layout {
  width: 100%;
  height: 100%;
  display: flex;
  .layout-l {
    width: 2rem;
    display: flex;
    .layout-l-img {
      width: 0.9rem;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 0.1rem;
      img {
        width: 0.9rem;
        height: 0.9rem;
      }
    }
    .layout-l-c {
      flex: 1;
      min-width: 0;
      & > div {
        font-size: 0.16rem;
        color: #44cfb9;
      }
      & > div:nth-child(1) {
        margin-bottom: 0.2rem;
        margin-top: 0.3rem;
      }
      & > div:nth-child(2) {
        margin-bottom: 0.2rem;
      }
    }
  }
  .layout-r {
    flex: 1;
    min-width: 0;
    #riskWarningClassification {
      width: 100%;
      height: 100%;
    }
    .table {
      width: 100%;
      height: calc(100%);
      box-sizing: border-box;
      padding: 0.1rem 0;

      .body {
        overflow-y: scroll;
        height: calc(100% - 0.3rem);
      }
      .row {
        width: 100%;
        display: flex;
        margin-bottom: 0.09rem;
        //height: 0.3rem;
        .col {
          color: #04f5d3;
          font-size: 0.16rem;
        }
        .col:nth-child(2) {
          width: 1.1rem;
          text-align: center;
        }
        .col:nth-child(1) {
          flex: 1;
          min-width: 0;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        //.col:nth-child(3) {
        //  width: 1rem;
        //  text-align: center;
        //}
      }
      .body::-webkit-scrollbar {
        display: none; /* 隐藏滚动条 */
      }
      .row:last-child {
        margin-bottom: 0;
      }
      .th {
        .col {
          color: #04f5d3;
          font-size: 0.18rem;
          font-weight: 700;
        }
      }
    }
  }
}
</style>
